<template>
  <div class="companys-container">
    <el-card>
      <div class="header">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="标签名称">
            <el-input v-model="formInline.tags" placeholder="请输入"></el-input>
          </el-form-item>
          <!-- 城市联动 -->
          <el-form-item class="city_select" label="城市" prop="status">
            <el-select v-model="formInline.province" placeholder="请选择" @change="getCityAreaList">
              <el-option v-for="(item,index) in cities" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="city_select" label="地区" prop="status">
            <el-select v-model="formInline.city" placeholder="请选择">
              <el-option
                v-for="(item,index) in cityAreaList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input v-model="formInline.shortName"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="searchbtn">
            <el-button size="medium" @click="clearForm">清除</el-button>
            <el-button size="medium" type="primary" @click="getCompanysList(formInline)">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-button
          class="addBtn"
          size="mini"
          type="success"
          icon="el-icon-edit"
          @click="addData"
        >新增用户</el-button>
      </div>
      <!-- 消息提示 警告 -->
      <el-alert :title="`共${total}条记录`" type="info" show-icon :closable="false"></el-alert>
      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="number" label="企业编号"></el-table-column>
        <el-table-column prop="shortName" label="企业简称"></el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column prop="creatorID" label="创建者"></el-table-column>
        <el-table-column prop="addDate" label="创建日期"></el-table-column>
        <el-table-column prop="remarks" label="备注"></el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state===1">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="updateData(scope.row)"
            ></el-button>
            <!-- 状态 -->
            <el-button
              size="mini"
              :type="scope.row.state===1?'success':'warning'"
              :icon="scope.row.state===1?'el-icon-check':'el-icon-close'"
              circle
              plain
              @click="undercompanyState(scope.row)"
            ></el-button>
            <!-- 删除 -->
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              @click="delCompnys(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加企业文本框 -->
      <el-dialog :title="dialogTitle" :visible.sync="addDialogVisible" width="50%">
        <el-form ref="newFormRef" :model="newForm" label-width="150px" :rules="newFormRules">
          <el-form-item label="企业名称" prop="company">
            <el-input type="text" v-model="newForm.company"></el-input>
          </el-form-item>
          <el-form-item label="所属公司" prop="shortName">
            <el-input type="text" v-model="newForm.shortName"></el-input>
          </el-form-item>
          <el-form-item>https://www.tianyancha.com （在此可查询所属公司全称及简称）</el-form-item>
          <!-- 城市联动 -->
          <el-form-item class="city_select" label="城市地区" prop="province">
            <el-select v-model="newForm.province" placeholder="请选择" @change="getCityAreaList">
              <el-option v-for="(item,index) in cities" :key="index" :label="item" :value="item"></el-option>
            </el-select>
            <el-select v-model="newForm.city" placeholder="请选择" prop="city">
              <el-option
                v-for="(item,index) in cityAreaList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向(企业标签)" class="textareabox" prop="tags">
            <el-input type="text" v-model="newForm.tags"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea" :rows="4" v-model="newForm.remarks"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { provinces, citys } from '@/assets/citys.js'
import {
  companysList,
  delComplant,
  companyState,
  addCompanysList,
  oneCompanysData,
  editCompanysData
} from '@/api/companys.js'
export default {
  name: 'CompanysContainer',
  data() {
    return {
      // form表单  请求参数
      formInline: {
        page: 1,
        pagesize: 5,
        // 标签
        tags: '',
        // 企业简称
        shortName: '',
        // 城市
        province: ''
        // // 区
        // city: '',
        // state: ''
      },
      // 城市联动
      cityAreaList: [],
      cities: [],
      // 请求参数
      queryList: {
        page: 1,
        pagesize: 5
      },
      status: [],

      total: 0,
      // 表格数据
      tableData: [],
      // 添加企业文本框显示状态
      addDialogVisible: false,
      // 添加企业数据
      newForm: {
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: '',
        isFamous: true
      },
      newFormRules: {
        shortName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        company: [{ required: true, message: '请输入公司', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入标签', trigger: 'blur' }],
        province: [{ required: true, message: '请选择城市', trigger: 'blur' }],
        city: [{ required: true, message: '请选择区域', trigger: 'blur' }],
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      titleMap: {
        addData: '添加企业',
        updateData: '修改企业'
      },
      dialogTitle: '',
      formLabelWidth: '120px',
      // form: {},
      companyId: ''
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 清空表单
    clearForm() {
      this.formInline = {}
    },
    // // 城市联动 市发生改变
    getCityList() {
      const data = provinces()
      this.cities = data
    },
    // // 城市联动 区发生改变
    getCityAreaList() {
      const data = citys(this.newForm.province)
      this.cityAreaList = data
      this.newForm.city = data[0]
    },
    // 获取表格数据
    async getCompanysList(val) {
      try {
        const { data } = await companysList(val || this.queryList)
        this.total = data.counts
        this.tableData = data.items
      } catch (err) {
        this.$message.error('获取失败')
      }
    },
    // 添加企业信息
    async addData() {
      this.newForm = {}
      this.addDialogVisible = true
      this.dialogTitle = this.titleMap.addData
    },
    // 修改企业信息
    async updateData(row) {
      this.addDialogVisible = true
      this.dialogTitle = this.titleMap.updateData
      const { data } = await oneCompanysData(row.id)
      this.companyId = row.id
      this.newForm = data
      console.log(this.form)
    },
    // 添加 修改 共用提交事件
    async submit() {
      if (this.dialogTitle === this.titleMap.addData) {
        try {
          await addCompanysList(this.newForm)
          this.addDialogVisible = false
          this.getCompanysList()
          this.$message.success('添加成功')
        } catch (err) {
          this.$message.error('添加失败')
        }
      } else {
        this.newForm.isFamous = !!1
        await editCompanysData(this.companyId, this.newForm)
        this.newForm = {}
        this.getCompanysList()
      }
      this.addDialogVisible = false
    },

    // 更改状态
    async undercompanyState(data) {
      if (data.state) {
        const confirmStr = await this.$confirm(
          '已成功禁用, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)
        if (confirmStr !== 'confirm') return
        try {
          await companyState(data.id, 0)
          this.$message.success('禁用成功')
          this.getCompanysList()
        } catch (err) {
          this.$message.error('禁用失败')
        }
      } else {
        // 启用
        const confirmStr = await this.$confirm(
          '已成功启用, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)
        if (confirmStr !== 'confirm') return
        try {
          await companyState(data.id, 1)
          this.$message.success('启用成功')
          this.getCompanysList()
        } catch (err) {
          this.$message.error('启用失败')
        }
      }
    },
    // 删除企业用户
    async delCompnys(id) {
      const confirmStr = await this.$confirm(
        '此操作将永久删除用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmStr !== 'confirm') return
      try {
        await delComplant(id)
        this.$message.success('删除成功')
      } catch (err) {
        this.$message.error('删除失败')
      }
      this.getCompanysList()
    }
  },
  created() {
    this.getCityList()
    this.getCompanysList()
  },
  mounted() {}
}
</script>

<style lang='less' scoped>
.companys-container {
  .header {
    position: relative;
    .el-form {
      /deep/.el-form-item {
        margin: 10px 2px;
        .el-form-item__label {
          font-weight: 700;
          width: 80px;
        }
        .el-input__inner {
          height: 30px;
          width: 221px;
        }
      }
      .searchbtn {
        padding-left: 80px;
      }
    }
  }
  .header > .addBtn {
    position: absolute;
    top: 76px;
    right: 20px;
  }
  /deep/.el-table__cell {
    text-align: center;
  }
  /deep/ .el-dialog__footer {
    text-align: center;
  }

  .el-dialog__body {
    .el-form {
      /deep/ .el-form-item__content {
        width: 443px;
      }
    }
  }
}
</style>
